<template>
  <div class="page-container">
    <!--工具栏-->
    <div class="toolbar">
      <el-form :inline="true" :model="filters" :size="size" ref="filters">

        <el-row class="search-input">
          <el-form-item prop="cashNo" label="申请编号：">
            <el-input type="text" v-model.trim="filters.cashNo" placeholder="申请编号" maxlength="80"
                      clearable></el-input>
          </el-form-item>
<!--          <el-form-item label="用户账号" prop="userAccount">-->
<!--          <el-input v-model="filters.userAccount" placeholder="用户账号"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="用户手机号" prop="phone">-->
<!--           <el-input v-model="filters.phone" placeholder="用户手机号"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="用户昵称" prop="nickName">-->
<!--           <el-input v-model="filters.nickName" placeholder="用户昵称"></el-input>-->
<!--        </el-form-item>-->
        </el-row>
        <el-row class="search-button">
          <el-form-item>
            <kt-button
              icon="fa fa-search"
              :label="$t('action.search')"
              type="primary"
              @click="findPage(null)"
            />
          </el-form-item>
          <el-form-item>
            <kt-button
              icon="fa fa-refresh"
              :label="$t('action.reset')"
              type="primary"
              @click="resetForm('filters')"
            />
          </el-form-item>
        </el-row>
        <el-row class="t_r button">
           <el-form-item>
            <el-button-group>
              <el-tooltip content="刷新" placement="top">
                <el-button icon="fa fa-refresh" @click="findPage(null)"></el-button>
              </el-tooltip>
              <el-tooltip content="列显示" placement="top">
                <el-button icon="fa fa-filter" @click="displayFilterColumnsDialog"></el-button>
              </el-tooltip>
              <el-tooltip content="导出" placement="top">
                <el-button icon="fa fa-file-excel-o" @click="downloadExcel"></el-button>
              </el-tooltip>
            </el-button-group>
          </el-form-item>
        </el-row>
      </el-form>
    </div>
    <div class="toolbar" style="float:right;padding-right:15px;">
      <!--表格显示列界面-->
      <table-column-filter-dialog
        ref="tableColumnFilterDialog"
        :columns="columns"
        @handleFilterColumns="handleFilterColumns"
      ></table-column-filter-dialog>
    </div>
    <!--表格内容栏-->
    <cy-table
      :width="1000"
      :height="250"
      :data="pageResult"
      :columns="filterColumns"
      :showEditOperation="true"
      :showOperation="false"
      :showBatchDelete="true"
      :showDeleteOperation="true"
      @findPage="findPage"
      ref="CyTable"
    ></cy-table>
  </div>
</template>

<script>
import PopupTreeInput from "@/components/PopupTreeInput";
import CyTable from "@/views/Core/JicTable";
import CyTable1 from "@/views/Core/CyTable";
import KtButton from "@/views/Core/KtButton";
import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";
export default {
  components: {
    PopupTreeInput,
    CyTable,
    CyTable1,
    KtButton,
    TableColumnFilterDialog
  },
  data() {
    return {
      size: "small",
      filters: {
        userAccount: null,
        phone: null,
        nickName: null,
      },
      columns: [
        {
          prop: 'cashNo', label: '申请编号', minWidth: 100,
          formatter: function (row, column, prop) {
            if (prop == '') return '-'
            else return prop
          }
        },
        {
          prop: 'cashSource', label: '申请来源', minWidth: 100,
          formatter: function (row, column, prop) {
            if (row.cashSource == 1){
              return 'H5'
            } else if (row.cashSource == 2){
              return 'PC'
            }else if (row.cashSource == 3){
              return ' Android'
            } else if (row.cashSource == 4){
              return 'IOS'
            } else if (row.cashSource == 5){
              return '后台'
            } else if (row.cashSource == 6){
              return '小程序'
            }

          }
        },
        { prop: "memberId", label: "结算人ID", minWidth: 100 },
        {prop: 'status', label: '申请状态', minWidth: 80,
          formatter: function (row, column, prop) {
            if (row.status == 1){
              return '待审核'
            } else if (row.status == 2){
              return '审核成功'
            }  else if (row.status == 3){
              return '审核拒绝'
            } else if (row.status == 4){
              return '待结算'
            }  else if (row.status == 5){
              return '结算中'
            }   else if (row.status == 6){
              return '结算成功'
            }  else if (row.status == 7){
              return '结算失败'
            }   else if (row.status == 8){
              return '结算完成'
            }
          }
        },
        {prop: 'cashAmount', label: '结算金额', minWidth: 80},
        {prop: 'applyTime', label: '结算时间', minWidth: 120}
      ],
      filterColumns: [],
      pageRequest: { pageNum: 1, pageSize: 10 },
      pageResult: {},
      operation: false, // true:新增, false:编辑
      dialogVisible: false,
      detailDialogVisible: false, // 新增编辑界面是否显示
      // 新增编辑界面数据
      dataForm: {
        pay_type: "",
        business_type: "",
        sale_channel: "",
        status: "1"
      },
    };
  },
  methods: {
    // 获取分页数据
    findPage: function(data) {
      let this_ = this;
      if (this_.filters == undefined || this_.filters == null) {
        this_.filters = {};
      }
      this_.filters.start = this.pageRequest.pageNum;
      this_.filters.limit = this.pageRequest.pageSize;
      this.utils.request.querySettlementList(this_.filters, function(res) {
        if (res.data.rows == null) {
          res.data.rows = [];
        }
        this_.$refs.CyTable.findPage({
          content: res.data.rows,
          total: res.data.total
        });
      });
    },

    resetForm(formName) {
      if (this.$refs[formName] != undefined) {
        this.$refs[formName].resetFields();
      }
      this.findPage();
    },
    // 处理表格列过滤显示
    displayFilterColumnsDialog: function() {
      this.$refs.tableColumnFilterDialog.setDialogVisible(true);
    },
    // 处理表格列过滤显示
    handleFilterColumns: function(data) {
      this.filterColumns = data.filterColumns;
      this.$refs.tableColumnFilterDialog.setDialogVisible(false);
    },
    // 处理表格列过滤显示
    initColumns: function() {
      var temp = [];
      $.each(this.columns, function(key, val) {
        temp.push(val);
      });
      this.filterColumns = temp;
    },
    //列表下载
    downloadExcel() {
      this.$confirm("确定下载列表文件?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let filename = "结算记录下载";
          this.$refs.CyTable.exportData(
            this.filters,
            this.filterColumns,
            filename
          );
        })
        .catch(() => {});
    }
  },

  mounted() {
    this.initColumns();
  }
};
</script>

<style scoped lang='scss'>
.w308{
  width: 308px;
}
</style>
